HTML Semantic Elements

Semantic Elements

Semantic elements provide meaning to the content. The developer can tell what the element is supposed to do by just looking at the tag name. Semantic element provides sense to both browsers as well as developer.

Example

<form>, <table>, <article>, <em>, <ul>, etc are the example of Semantic Elements. A non-semantic element does not provide a proper meaning to its content, and it can be used for a different purpose. <div> and <span> are the examples of non-semantic elements.

Some Major Semantic Elements used in HTML

Before HTML5 <div> was often used to represent various part of a web page, but in HTML 5 we have some built-in elements which replace the most common use of <div> tag.

HTML <header> Element

<header> element mostly use to specify header for a document or article. Heading and sub heading elements can be defined inside this element.

Example:

<header>
<h3> HTML </h3>
<h4>  HTML History</h4>
</header>

HTML <nav> Element:

<nav> stand for navigation, and it generally contains a list of links for the various route of a webpage.

Example:

<nav>
 <ul>
 
  <li> <a href="techgeekbuzz.com/html">HTML</a> </li>
  <li> <a href="techgeekbuzz.com/python/">Python</a> </li>
  <li> <a href="techgeekbuzz.com/Data Structure/">Data Structure</a> </li>
  <li> <a href="techgeekbuzz.com/Data Science/">Data Science</a> </li>

 </ul>
</nav>

HTML <article> Element:

In HTML5 <article> element is defined as an self-contained and independent element. It generally represents a piece of content that is separate from the rest of the page. For example <article> element can be used for forum posts, comments, newspaper and magazine article.

Example:

<article>
<h1> Topic Heading</h1>
<p> Description about Topic</p>
</article>

HTML  <section> Element:

<section> is used to provide a logical container for the page article. Section can be used to divide the content of an article.

Example

<article>

<section>
<h2> Welcome to TechGeekBuzz</h2>
<p> This tutorial series is all about HTML5 and it's all concepts. </p>
</section>

<section>
<h2>Contact Us</h2>
<p>You can contact us through Email</p>
</section>

</article>

HTML <aside> Element

<aside> element is used to represent that content which is not a part of the current content but relates to the main website. For example all the recommendation list created using <aside> element.

Example

<article>
<h1> HTML </h1>
<p> HTML is a markup Language...... </p>

<aside>
<p>Recommended for You </p>
<ul>
<li> CSS </li>
<li> JavaScript </li>
<li> Python</li>
</ul>
</aside>

</article>

HTML<footer> Element

<footer> element is generally used to represent the bottom section of a webpage. It contains all the general links like contact information, location, term and condition, privacy licences, etc.

Example

<footer>

<a href =""> Contact Us </a>
<a href =""> Privacy Policy </a>
<a href =""> Copyright Information </a>
<a href =""> Terms of Services </a>

</footer>

Semantic Elements Quick Summary

• Semantic elements provide meaning to the content.
• Semantic elements do not provide any default specific styling.
• <header> element is used to represent the various headings.
• <nav> element represents a part of the page that can navigate to other parts of the website.
• <article> is used to express a unique piece of content.
• <footer> represents the bottom part of the webpage.